<template>
    <div class="home-hot">
        <!-- 标题 -->
        <HomePanel title="人气推荐" sub-title="人气爆款 不容错过" ref="target">
            <template #right><XtxMore path="/" /></template>
            <!-- 面板内容 -->
            <Transition name="fade">
                <ul class="goods-list" v-if="home.newGoodsList.length > 0">
                    <li v-for="item in home.hotGoodsList" :key="item.id">
                        <RouterLink :to="`/goods/${item.id}`">
                            <img v-lazy="item.picture" alt="" />
                            <p class="name ellipsis">{{item.title}}</p>
                            <p class="price">{{item.alt}}</p>
                        </RouterLink>
                    </li>
                </ul>
                <HomeSkeleton v-else />
            </Transition>
        </HomePanel>
    </div>
</template>

<script lang="ts" setup name="HomeHot">
    import HomePanel from './home-panel.vue'
    import useStore from '@/store'
    import { useLazyData } from '@/utils/hook'
    // 骨架屏
    import HomeSkeleton from './home-skeleton.vue'
    const {home} = useStore()
    // 请求人气推荐列表 -> home.getGoddsHotList -> 数据懒加载
    const target = useLazyData(home.getGoddsHotList)
</script>

<style scoped lang="less">
    .goods-list {
        display: flex;
        justify-content: space-between;
        height: 406px;
        li {
            width: 306px;
            height: 406px;
            .hoverShadow();
            img {
                width: 306px;
                height: 306px;
            }
            p {
                font-size: 22px;
                padding-top: 12px;
                text-align: center;
            }
            .desc {
                color: #999;
                font-size: 18px;
            }
        }
    }
</style>